<template>
    <div>
        <appHeader :titles='"我的"'/>
        <div class="infos">
           <div class="avatarArea">
               <img src="./avatar.png" alt="">
               <div class="student_info">
                   <p>张晓花</p>
                   <p>七年级二班</p>
               </div>
           </div>
           <div class="code">
               <img src="./code.png" alt="">
           </div>
        </div>
        <div class="userOperate">
           <div class="user">
               <router-link to='register'>
                   <div class="content">
                       
                        <span>认证账户</span>
                        <div class="other">
                           
                            <img src="./right.png" alt="">
                        </div>
                   </div>
               </router-link>
               <router-link to='account'>
                   <div class="content">
                       <span>帐户余额</span>
                        <div class="other">
                            <span>12345.00元</span>
                            <img src="./right.png" alt="">
                        </div>
                   </div>
               </router-link>
               <router-link to='fixedCash'>
                   <div class="content">
                       <span>押金</span>
                         <div class="other">
                            <span>30.00元</span>
                            <img src="./right.png" alt="">
                        </div>
                   </div>
               </router-link>
               <router-link to='miss'>
                   <div class="content" >
                       
                       <span>挂失</span>
                        <div class="other">
                            
                            <img src="./right.png" alt="">
                        </div>
                   </div>
               </router-link>
               <router-link to='release'>
                   <div class="content">
                       
                       <span>解绑</span>
                        <div class="other">
                           
                            <img src="./right.png" alt="">
                        </div>
                   </div>
               </router-link>
           </div>
        </div>
        <div class="personal-info">
           <router-link to='infos'>
                   <div class="content">
                       <span>个人信息</span>
                        <div class="other">
                           
                            <img src="./right.png" alt="">
                        </div>
                   </div>
               </router-link>
               <router-link to='setting'>
                   <div class="content">
                       <span>设置</span>
                        <div class="other">
                         
                            <img src="./right.png" alt="">
                        </div>
                   </div>
               </router-link>
        </div>
         <appFooter/>
    </div>
</template>

<script>
import appHeader from '../header/header'
import appFooter from '../footer/appFooter'
export default {
  components: {
    appHeader,
    appFooter
  }
}
</script>

<style lang='scss'>
$em-base: 75;
@import '../../common/mixin/_bourbon.scss';
.infos {
  height: rem(244px);
  padding: 0 rem(26px);
  position: relative;
  display: flex;
  background: #ffffff;
  .avatarArea {
    display: flex;
    margin-top: rem(49px);
    img {
      height: rem(146px);
      width: rem(146px);
    }
    .student_info {
      margin-left: rem(44px);
      p {
        margin-top: rem(30px);
        font-size: 16px;
        &:nth-child(2) {
          font-size: 14px;
        }
      }
    }
  }
  .code {
    position: absolute;
    right: rem(26px);
    top: 40%;
    transform: translate(-50%);
    height: rem(26px);
    width: rem(26px);
  }
}
.userOperate {
  background: #ffffff;
  margin-top: rem(24px);
}
.user {
  padding: 0 rem(26px);
}
.content {
  height: rem(88px);
  background: #ffffff;
  border-bottom: 1px solid #f3f3f3;
  line-height: rem(88px);
  font-size: 20px;
  color: #666666;
  display: flex;
  justify-content: space-between;
  .other {
    span {
      margin-right: rem(20px);
    }
    img {
      height: rem(40px);
      width: rem(26px);
      padding-top: rem(20px);
    }
  }
}
.personal-info {
  padding: 0 rem(26px);
  background: #ffffff;
  margin-top: rem(30px);
}
</style>
